@import "header"; //头部
@import "main_header"; //头部
@import "user"; //用户盒子
@import "footer"; //尾部
@import "side"; //侧边导航
/*购物车列表*/
header {
    height: 40px;
}
main {
    background: #f2f2f2;
    color: #333;
    font-size: 14px;
    .main_header {
        margin-top: 41px;
        background: #fff;
    }
    .cartApp {
        width: 1180px;
        margin: 0 auto;
    }
}
.main_header {
    .main_head_box {
        .logo {
            margin-right: 10px;
        }
    }
    .header_title {
        border-left: 1px solid #979797;
        font-size: 18px;
        font-weight: 400;
        padding-left: 8px;
        height: 28px;
        line-height: 28px;
    }
}

.tables {
    width: 1020px;
    margin: 0 auto;
    thead {
        margin-bottom: 20px;
        font-weight: 700;
    }
    tr {
        background: #fff;
        text-align: center;
    }
}
/*购物清单*/
.cartApp {
    .notice {
        width: 1020px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #f33;
        text-indent: 35px;
        background: url(https://p.ssl.qhimg.com/t0162338fb79bf00d67.png) #ffebc6 no-repeat 10px center;
        background-size: 19px 19px;
        border-radius: 5px;
        margin: 10px auto;
    }
    .stat {
        width: 1020px;
        height: 70px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #eaebec;
        font-size: 14px;
        line-height: 70px;
        margin-top: 15px;
        position: relative;
        padding: 0 10px;
        box-sizing: border-box;
        .stat_left {
            float: left;
            span {
                font-weight: 700;
                margin-right: 20px;
            }
        }
        .stat_right {
            float: right;
        }
    }
}

.tables {
    tr {
        height: 100px;
        line-height: 100px;
        border-top: 1px solid #bbb;
    }
    td {
        border-bottom: 1px solid #ccc;
    }
    /*商品图片*/
    .pic {
        border: 1px solid #ddd;
        border-radius: 5px;
        height: 68px;
        width: 68px;
        float: left;
        margin-top: 15px;
    }
    /*商品标题*/
    .title {
        text-indent: 15px;
    }
    .quantity_red,
    .quantity_add {
        display: block;
        width: 20px;
        height: 24px;
        line-height: 20px;
        font-size: 18px;
        color: #666;
        padding: 0 2px;
        border: 1px solid #ccc;
        float: left;
    }
    /*商品数量*/
    .quantity_num {
        width: 35px;
        height: 22px;
        outline: 0;
        border: 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        float: left;
        text-align: center;
    }
    /*商品总价格*/
    .total {
        display: inline-block;
        color: #f33;
        width: 80px;
    }
    .check_goods {
        border: 0;
    }
    /*商品删除按钮*/
    .js_del {
        padding: 0 20px;
        cursor: pointer;
    }

    .price span::before,
    .total::before {
        content: "￥";
    }
}

/*全选和选中删除*/
.stat_left {
    span {
        font-weight: 700;
        margin-right: 20px;
    }
    .del_select {
        cursor: pointer;
    }
}

/*结算*/
.stat_right {
    .jnum,
    b {
        color: #f33;
    }
    .cart_total {
        color: #f33;
        font-size: 16px;
        font-weight: 900;
    }
    .cart_btn {
        display: block;
        width: 160px;
        height: 50px;
        line-height: 50px;
        background: linear-gradient(180deg, rgba(255, 51, 51, 1) 0, rgba(255, 102, 51, 1) 100%);
        border-radius: 6px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        cursor: pointer;
        float: right;

        margin: 10px 30px 0 60px;
    }
}

/*删除确认框*/
.dialog_box {
    .del_dialog {
        position: fixed;
        width: 300px;
        left: 50%;
        margin-left: -150px;
        top: 40%;
        background-color: #fff;
        box-shadow: 0 1px 8px -2px #999;
        border-radius: 5px;
        overflow: hidden;
        font-size: 14px;
        z-index: 2000;
    }
    .dialog_top {
        background: #f0f0f0;
        color: #333;
        font-weight: 400;
        span {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            padding-left: 20px;
        }
        .dialog_close {
            display: block;
            height: 30px;
            width: 30px;
            background-image: url(https://p.ssl.qhimg.com/t013c8d01cfcf71812c.png);
            background-size: auto auto;
            float: right;
        }
    }
    .dialog_main {
        margin-top: 15px;
        text-align: center;
        .dialog_text {
            font-size: 14px;
            color: #000;
        }
        .btn_confirm,
        .btn_cancel {
            margin: 20px 0 10px;
            display: inline-block;
            width: 120px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            font-size: 12px;
            border-radius: 5px;
            background: linear-gradient(180deg, #f33 0, #f63 100%);
        }
        .btn_cancel {
            background: #eee;
            color: #999;
            margin-left: 10px;
        }
    }
}
